<!--  -->
<script setup>
import { timeAgo } from '@/utils/time'
import IconLabel from './IconLabel.vue'
import { getUsernameStyleByRole } from '@/utils/misc'

defineProps(['data'])
</script>

<template>
  <div v-for="item in data" :key="item.id">
    <div class="question-item">
      <RouterLink :to="`/question/${item.id}`" class="quest-header">
        <Icon v-if="item.pinned" icon-name="pin"></Icon>
        <div class="title">{{ item.title }}</div>
      </RouterLink>
      <div class="quest-info">
        <RouterLink :to="`/users/${item.userInfo.username}`">
          <span class="info-item author" :style="getUsernameStyleByRole(item.userInfo.roles)">{{
            item.userInfo.displayName }}</span>
        </RouterLink>
        <span class="info-item">{{ '提问于 ' + timeAgo(item.createAt) }}</span>
        <IconLabel class="info-item" icon-name="thumb">{{ item.voteCount }} 个点赞</IconLabel>
        <IconLabel class="info-item" icon-name="answer">{{ item.answerCount }} 个回答</IconLabel>
        <IconLabel class="info-item" icon-name="views">{{ item.viewCount }} 次浏览</IconLabel>
        <IconLabel class="status" v-if="item.acceptedAnswerId" icon-name="answer">已解决</IconLabel>
      </div>
      <div class="quest-tags">
        <RouterLink v-for="tag in item.tags" :key="tag" :to="`/tag/${tag.slugName}`" class="tag">
          {{ tag.slugName }}
        </RouterLink>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.question-item {
  padding: 1em 0;
  border-bottom: 1px dashed var(--border-secondary);

  .quest-header {
    display: flex;
    align-items: center;
    gap: 4px;

    &:hover {
      color: red;
    }

    .title {
      font-size: 1.2em;
      font-weight: bold;
      cursor: pointer;
      transition: color .1s ease-in-out;
    }
  }

  .quest-info {
    display: flex;
    align-items: center;
    margin: 1em 0;
    font-size: 0.8em;
    color: var(--text-secondary);

    .author {
      &:hover {
        color: var(--text-primary);
      }
    }

    .info-item {
      color: grey;
      margin-right: 1.5em;
    }

    .status {
      margin-left: auto;
    }
  }

  .quest-tags {
    display: flex;
    align-items: center;
    font-size: 0.8em;
    color: var(--text-secondary);

    .tag {
      margin-right: 0.5em;
      padding: 0.2em 0.5em;
      border-radius: 2px;
      background-color: var(--bgc-secondary);

      &:hover {
        background-color: var(--bgc-primary);
      }
    }
  }
}
</style>
